<template>
	<div class="nav-buttons">
		<nav-button
			v-for="(item,index) in navButtonItems"
			:key="item.text"
			:icon="item.icon"
			:text="item.text"
			:bgColor="item.bgColor"
			:index="index"
			@click="toPage">
		</nav-button>
	</div>
</template>

<script>
    export default {
        data() {
            return {
				navButtonItems: [
					{
						icon: 'service',
						text: '测评',
						bgColor: 'blue',
						link: './practise'
					},
					{
						icon: 'favor',
						text: '记录',
						bgColor: 'yellow',
						link: './history'
					},
					{
						icon: 'people',
						text: '个人信息',
						bgColor: 'orange',
						link: ''
					},
					{
						icon: 'link',
						text: '分析',
						bgColor: 'green',
						link: ''
					}
				]
            }
        },
		methods: {
			toPage(index) {
				this.$emit('click', this.navButtonItems[index])
			}
		}
    }
</script>

<style lang="scss" scoped>
	.nav-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 25%;
		max-height: 600px;
		overflow: auto;
	}
</style>


